<template>
  <div class="qr_code">
    <div ref="contains" class="contains"></div>
    <slot :data="{ $data }" name="description">
      <el-button @click="follow" type="info"> 关注我=>{{ name }} </el-button>
    </slot>
    <slot name="button">
      <el-button @click="follow" type="info">确定</el-button>
    </slot>
  </div>
</template>

<script>
import $ from 'jquery'
// eslint-disable-next-line no-unused-vars
import qrcode from '../../utils/qr-code/jquery.qrcode.js'
export default {
  name: 'MangoQrCode',
  props: {
    width: {
      type: Number || String,
      default: 240
    },
    height: {
      type: Number || String,
      default: 240
    },
    Url: {
      type: String,
      default: 'http://weibo.com/MMangooLuo'
    },
    Render: {
      type: String,
      required: false,
      default: 'canvas'
    },
    Src: {
      type: String,
      default:
        'https://mmangoo-obs.obs.cn-east-2.myhuaweicloud.com/1618279482388?versionId=null'
    }
  },
  data () {
    return {
      user: 'mmangoo'
    }
  },
  inject: ['name'],
  mounted () {
    $('.contains').qrcode({
      render: this.Render, // 设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
      text: this.Url, // 扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
      width: this.width, // 二维码的宽度
      height: this.height, // 二维码的高度
      background: '#ffffff', // 二维码的后景色
      foreground: '#000000', // 二维码的前景色
      src: this.Src
    })
  },
  methods: {
    follow () {
      window.open(this.Url)
    },
    saveImg () {
      const image = new Image()
      image.src = this.$refs.contains.firstElementChild.toDataURL('image/png')
      return image.src
    }
  }
}
</script>
<style lang="less" scoped>
.contains {
  display: block;
}
</style>
